<template>
  <k-form-modal
    width="small"
    title="对公充值"
    label-width="80px"
    v-bind="formModalState"
    v-on="formModalEvent"
  >
    <el-form-item label="充值金额" prop="amount">
      <el-input v-model="state.model.amount" clearable placeholder="请输入赠送金额（元）" maxlength="10" />
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="state.model.remark"
        maxlength="200"
        allow-clear
        placeholder="请输入备注"
        show-word-limit
        type="textarea"
        rows="4"
      />
    </el-form-item>
  </k-form-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useFormModal } from '@crud/index';
import { colonelTopup } from '@/api/crm-agency/kgj/colonel';
defineOptions({
  name: 'KgjRechargeModal'
});
const emits = defineEmits(['success']);
const rowData = ref<Record<string, any>>({});
const { state, formModalState, formModalEvent, ...methods } = useFormModal({
  model: {
    amount: '',
    remark: '',
    colonel_id: undefined
  },
  rules: {
    amount: [
      { required: true, message: '请输入赠送金额' },
      { pattern: /^[0-9]+$/, message: '请输入整数', trigger: ['change', 'blur'] }
    ],
    remark: [{ required: true, message: '请输入备注' }]
  },
  onShow: (mode = 0, data: any) => {
    rowData.value = {};
    if (data) {
      rowData.value = data;
      state.model = {
        ...state.model,
        colonel_id: data.colonel_id
      };
    }
  },
  onSubmit: async (model: any, mode = 0) => {
    if (mode === 1) {
      const res = await colonelTopup(model);
      if (!res.err) {
        ElMessage.success('充值成功');
        emits('success');
      }
      return res;
    }
  }
});

defineExpose({
  show: methods.show
});
</script>
